<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告牌</title>
    <link rel="stylesheet" href="http://localhost:8080/libs/Cesium/1.40/Build/Cesium/Widgets/widgets.css">
    <script type="text/javascript" src="http://localhost:8080/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://localhost:8080/libs/Cesium/1.40/Build/Cesium/Cesium.js"></script>
    <style>
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #btnDiv {
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="btnDiv">
    <button class="cesium-button" onclick="addBillboard()">添加一个广告牌</button>
    <button class="cesium-button" onclick="setBillboardProperties()">初始设置广告牌的属性</button>
    <button class="cesium-button" onclick="changeBillboardProperties()">动态设置广告牌属性</button>
    <button class="cesium-button" onclick="sizeBillboardInMeters()">以米为单位进行显示</button>
    <button class="cesium-button" onclick="addMultipleBillboards()">添加多个广告牌</button>
    <button class="cesium-button" onclick="scaleByDistance()">随高度缩放尺寸</button>
    <button class="cesium-button" onclick="fadeByDistance()">随高度透明变化</button>
    <button class="cesium-button" onclick="offsetByDistance()">位置重叠偏移</button>
    <button class="cesium-button" onclick="addMarkerBillboards()">添加marker广告牌</button>
    <button class="cesium-button" onclick="disableDepthTest()">当广告牌贴近地表是禁用深度测试</button>
</div>
<script>

    // 名称	                        类型	    默认	                    描述
    // image	                    属性		                        可选 属性，用于指定用于广告牌的图像，URI或画布。
    // show	                        属性	    true	                可选 指定广告牌可见性的布尔属性。
    // scale	                    属性  	1.0	                    可选 数字属性，指定应用于图像大小的比例。
    // horizontalOrigin	            属性	    HorizontalOrigin.CENTER	可选的 水平排列方式
    // verticalOrigin	            属性	    VerticalOrigin.CENTER	可选的 垂直排列方式
    // eyeOffset	                属性	    Cartesian3.ZERO	        可选 A Cartesian3指定眼睛偏移的属性 x 右 y 上 z 前。
    // pixelOffset	                属性	    Cartesian2.ZERO	        可选 一个Cartesian2指定像素偏移量的属性。
    // rotation	                    属性	    0	                    可选 数字属性，指定有关alignedAxis的旋转。
    // alignedAxis	                属性  	Cartesian3.ZERO	        可选 一个Cartesian3指定单位矢量旋转轴的属性。
    // width	                    属性		                        可选 数字属性，以像素为单位指定广告牌的宽度，覆盖原始大小。
    // height	                    属性		                        可选 数字属性，以像素为单位指定广告牌的高度，覆盖原始大小。
    // color	                    属性	    Color.WHITE	            可选 属性，指定Color图像的色调。
    // scaleByDistance	            属性		                        可选的 一个NearFarScalar属性用于基于从相机的距离来缩放点。
    // translucencyByDistance	    属性		                        可选 甲NearFarScalar属性时使用的基于从摄像机的距离来设置透光性。
    // pixelOffsetScaleByDistance	属性		                        可选 甲NearFarScalar属性时使用的基于从摄像机的距离来设置pixelOffset，用于。
    // imageSubRegion	            属性		                        可选 属性，用于指定BoundingRectangle用于广告牌的图像的子区域，而不是整个图像，以像素为单位从左下角开始测量。
    // sizeInMeters	                属性		                        可选 一个布尔属性，指定此广告牌的尺寸是否应以米为单位进行测量。
    // heightReference	            属性	    HeightReference.NONE	可选的 一个属性，指定高度相对于什么。
    // distanceDisplayCondition	    属性		                        可选的 一个属性，用于指定相机将显示该广告牌的距离。
    // disableDepthTestDistance	    属性		                        可选的 一个属性，用于指定从相机到禁用深度测试的距离。

    var viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否创建动画小器件，左下角仪表
        baseLayerPicker: false,//是否显示图层选择器,右上角按钮
        fullscreenButton: false,//是否显示全屏按钮,右下角按钮
        geocoder: false,//是否显示geocoder小器件，右上角查询按钮
        homeButton: false,//是否显示Home按钮,右上角按钮
        infoBox: true,//是否显示信息框
        sceneModePicker: false,//是否显示3D/2D选择器 ,右上角按钮
        selectionIndicator: false,//是否显示选取指示器组件，绿色选中框
        timeline: false,//是否显示时间轴，底部
        navigationHelpButton: false//是否显示帮助按钮，右上角按钮
    });

    function addBillboard() {
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
            billboard: {
                image: '../images/Cesium_Logo_overlay.png'
            }
        });
    }

    function setBillboardProperties() {
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
            billboard : {
                image : '../images/Cesium_Logo_overlay.png', // default: undefined
                show : true, // default
                pixelOffset : new Cesium.Cartesian2(0, -50), // default: (0, 0)
                eyeOffset : new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
                horizontalOrigin : Cesium.HorizontalOrigin.CENTER, // default
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM, // default: CENTER
                scale : 2.0, // default: 1.0
                color : Cesium.Color.LIME, // default: WHITE
                rotation : Cesium.Math.PI_OVER_FOUR, // default: 0.0
                alignedAxis : Cesium.Cartesian3.ZERO, // default
                width : 100, // default: undefined
                height : 25 // default: undefined
            }
        });
    }

    function changeBillboardProperties() {
        var entity = viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 300000.0),
            billboard : {
                image : '../images/Cesium_Logo_overlay.png'
            }
        });

        var billboard = entity.billboard;
        billboard.scale = 3.0;
        billboard.color = Cesium.Color.WHITE.withAlpha(0.25);
    }


    function sizeBillboardInMeters() {
        var entity = viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
            billboard : {
                image : '../images/Cesium_Logo_overlay.png',
                sizeInMeters : true
            }
        });

        viewer.zoomTo(entity);
    }

    function addMultipleBillboards() {
        var logoUrl = '../images/Cesium_Logo_overlay.png';
        var facilityUrl = '../images/facility.gif';

        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
            billboard : {
                image : logoUrl
            }
        });
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-80.50, 35.14),
            billboard : {
                image : facilityUrl
            }
        });
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
            billboard : {
                image : facilityUrl
            }
        });
    }

    function scaleByDistance() {
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
            billboard : {
                image : '../images/facility.gif',
                scaleByDistance : new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5) // 从1.5e2 到 1.5e7 的 相机距离 尺寸从2.0 到 0.5
            }
        });
    }

    function fadeByDistance() {
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
            billboard : {
                image : '../images/Cesium_Logo_overlay.png',
                translucencyByDistance : new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5)
            }
        });
    }

    function offsetByDistance() {
        Cesium.when.all([
                Cesium.loadImage('../images/Cesium_Logo_overlay.png'),
                Cesium.loadImage('../images/facility.gif')
            ],
            function(images) {
                // As viewer zooms closer to facility billboard,
                // increase pixelOffset on CesiumLogo billboard to this height
                var facilityHeight = images[1].height;

                // colocated billboards, separate as viewer gets closer
                viewer.entities.add({
                    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                    billboard : {
                        image : images[1],
                        horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin : Cesium.VerticalOrigin.BOTTOM
                    }
                });
                viewer.entities.add({
                    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                    billboard : {
                        image : images[0],
                        horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                        pixelOffset : new Cesium.Cartesian2(0.0, -facilityHeight), // 当有多个对象在同一个坐标点时，就需要对其他对象做偏移处理
                        pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.0), // 设置随相机高度的变化 偏移像素的变化
                        translucencyByDistance : new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.1) // 设置随相机高度的变化 透明度的变化
                    }
                });
            });
    }

    function addMarkerBillboards() {

        // Add several billboards based on the above image in the atlas.
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
            billboard : {
                image : '../images/whiteShapes.png',
                imageSubRegion : new Cesium.BoundingRectangle(49, 43, 18, 18),
                color : Cesium.Color.LIME
            }
        });
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-84.0, 39.0),
            billboard : {
                image : '../images/whiteShapes.png',
                imageSubRegion : new Cesium.BoundingRectangle(61, 23, 18, 18), //这个跟web中的原理是一样的 一张大图 取其中的一个小图 x y w h
                color : new Cesium.Color(0, 0.5, 1.0, 1.0)
            }
        });
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-70.0, 41.0),
            billboard : {
                image : '../images/whiteShapes.png',
                imageSubRegion : new Cesium.BoundingRectangle(67, 80, 14, 14),
                color : new Cesium.Color(0.5, 0.9, 1.0, 1.0)
            }
        });
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-73.0, 37.0),
            billboard : {
                image : '../images/whiteShapes.png',
                imageSubRegion : new Cesium.BoundingRectangle(27, 103, 22, 22),
                color : Cesium.Color.RED
            }
        });
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-79.0, 35.0),
            billboard : {
                image : '../images/whiteShapes.png',
                imageSubRegion : new Cesium.BoundingRectangle(105, 105, 18, 18),
                color : Cesium.Color.YELLOW
            }
        });
    }

    var terrainProvider;
    function disableDepthTest() {
        terrainProvider = viewer.terrainProvider;
        viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
            url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
            requestWaterMask : true,
            requestVertexNormals : true
        });
        viewer.scene.globe.depthTestAgainstTerrain = true; // 启用深度测试

        // 获取或设置从相机到禁用深度测试的距离，例如，防止被地形剪切。设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，将不会应用深度测试。

        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
            billboard : {
                image : '../images/facility.gif',
                heightReference : Cesium.HeightReference.CLAMP_TO_GROUND, // 让广告牌始终贴在地形表面---->前提是设置了terrainProvider
                // Cesium.HeightReference.RELATIVE_TO_GROUND 相对于表面 结合height 属性
                disableDepthTestDistance : Number.POSITIVE_INFINITY // 当为0时，广告牌会被地形所剪切
            }
        });
        viewer.zoomTo(viewer.entities);
    }
    
    function reset() {
        viewer.camera.flyHome(0);
        viewer.entities.removeAll();

        if (Cesium.defined(terrainProvider)) {
            viewer.terrainProvider = terrainProvider;
            terrainProvider = undefined;
            viewer.scene.globe.depthTestAgainstTerrain = false;
        }
    }


































</script>
</body>
</html>